<template>
  <div id="app" class="banner">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">

      <van-swipe-item v-for="item in bannerimages" :key="item.id">
        <img :src="item.image_url" alt=""/>
      </van-swipe-item>

      <!-- <van-swipe-item
        ><img src="../../assets/img/home/banner-1.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../../assets/img/home/banner-2.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../../assets/img/home/banner-3.jpg" alt=""
      /></van-swipe-item>
      <van-swipe-item
        ><img src="../../assets/img/home/banner-4.jpg" alt=""
      /></van-swipe-item> -->
    </van-swipe>

    <ul class="bannerList">
      <li v-for="item in bannerList" :key="item.id">
        <img :src="item.icon_url" alt="" />
        <!-- <div :style="{ 'background-image': 'url(' + item.url + ')','background-repeat':'no-repeat','background-size':'cover' }"></div> -->
        <p>{{ item.name }}</p>
      </li>
    </ul>

    <div class="bannerList-bottom"></div>
  </div>
</template>

<script type="text/javascript">

import { home } from "@/api/home/index";

export default {
  data() {
    return {
      bannerList: [],
      bannerimages:[],
    };
  },
  methods: {},
  computed: {},
  created() {
    home().then(res=>{
      // console.log(res.channel);
      this.bannerList = res.channel
      this.bannerimages = res.banner
    })
  },
  mounted() {},
};
</script>
<style scoped lang="scss">
@mixin fle {
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 200px;
  text-align: center;
  background-color: #39a9ed;
}
.van-swipe-item img {
  width: 100%;
  height: 200px;
}

.bannerList {
  img {
    width: 29px;
    height: 29px;
    margin: 10px 0 3px 0;
  }
  p{
    margin: 10px 0 1px 0;
  }
  @include fle;
  justify-content: space-around;
  margin-bottom: 20px;
}

.bannerList-bottom {
  width: 100%;
  height: 10px;
  background-color: #f4f4f4;
}
</style>
